<template>
  <div>
    <el-button type="primary" size="default" @click="handleRole(null)"
      >新增账号</el-button
    >

    <el-table :data="tableData" style="width: 100%" row-key="objectId">
      <el-table-column label="账号名称" width="180" prop="username">
      </el-table-column>
      <el-table-column label="关联角色">
        <template #default="scope">
          {{ scope.row.roleId }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleRole(scope.row, scope.$index)"
            >编辑</el-button
          >
          <el-popconfirm
            title="删除后无法找回，确定不是手抖了?"
            confirm-button-text="确定"
            cancel-button-text="取消"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="新增账号" v-model="drawer" direction="rtl" size="40%">
      <UserForm />
    </el-drawer>
  </div>
</template>

<script>
import { userGet, roleDel } from "@/api/user.js";
import UserForm from "./components/user-form.vue";
export default {
  components: {
    UserForm,
  },
  data() {
    return {
      tableData: [],
      drawer: false,
      routesMap: null,
      rowData: null,
    };
  },
  created() {
    userGet().then((res) => {
      this.tableData = res.data.results;
      console.log("组件内数据", res);
    });
  },
  methods: {
    handleRole(row, index) {
      this.drawer = true;
    },
  },
};
</script>
